<template>
  <el-dialog
  title="流程设计器"
  :visible.sync="dialogVisible"
  width="90%"
  :before-close="handleClose">
  <Modeler ref="modeler" :params="params" style="height: 700px;"></Modeler>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取消</el-button>
    <el-button type="primary" @click="handleOk">保存</el-button>
    <el-button type="primary" @click="handleOkAndClose">保存并关闭</el-button>
  </span>
</el-dialog>
</template>


<script>
import Modeler from './components/Modeler'
export default {
  props: ['dialogVisible', 'params'],
  components: {
    Modeler
  },
  watch: {
    'params.id': {
      // immediate: true,
      handler: function (nval) {
        console.log('nval： ')
        console.log(nval)
      },
    }
  },
  data() {
    return {

    };
  },
  methods: {
    handleOk() {
      this.$refs.modeler.saveXML();
    },
    handleOkAndClose() {
      this.$refs.modeler.saveXML();
      this.$emit('handleVisiable', false)
    },
    handleClose(done) {
      this.$emit('handleVisiable', false)
    },
  }
};
</script>
